<template>
  <el-container>
    <el-header>
      <div style="width: 100%">
        <navigator></navigator>
      </div>
    </el-header>
    <el-main class="create-main">
      <el-card class="main">
        <img class="picture" src="@/assets/home/challengeBackground.jpg">
        <el-form :model="createChallengeParams" label-width="150px">
          <el-form-item label="比赛名称" prop="challengeName">
            <el-input
              v-model="createChallengeParams.challengeName"
              name="challengeName"
              placeholder="请输入比赛名称"></el-input>
          </el-form-item>
          <el-form-item label="起止时间">
            <div class="time1">
              <el-date-picker
                v-model="createChallengeParams.startTime"
                type="datetime"
                placeholder="选择开始时间"
                value-format="YYYY-MM-DD HH:mm:ss">
              </el-date-picker>
            </div>
            <div class="time2">
              <el-date-picker
                v-model="createChallengeParams.endTime"
                type="datetime"
                class="end2"
                placeholder="选择结束时间"
                value-format="YYYY-MM-DD HH:mm:ss">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="参赛人数" prop="maxParticipantsNumber">
            <el-input-number v-model="createChallengeParams.maxParticipantsNumber"
                             name="maxParticipantsNumber"
                             :step="50"
                             :min="0"
                             class="create-number">
            </el-input-number>
          </el-form-item>
          <el-form-item label="股票代码" prop="stockCode">
            <div class="stockCode">
              <el-select
                v-model="createChallengeParams.stockCode"
                placeholder="请选择股票代码"
                name="stockCode">
                <el-option label="股票1" value="sh600519"></el-option>
                <el-option label="股票2" value="sh600519"></el-option>
                <el-option label="股票3" value="sh600519"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="起始资金" prop="startingFunds">
            <el-input-number v-model="createChallengeParams.startingFunds"
                             name="startingFunds"
                             :step="10000"
                             :min="0"
                             class="create-funds">
            </el-input-number>
          </el-form-item>
          <el-form-item label="挑战赛介绍" prop="introduction">
            <el-input type="textarea"
                      v-model="createChallengeParams.introduction"
                      name="introduction"
                      placeholder="请输入挑战赛介绍"></el-input>
          </el-form-item>
          <el-form-item class="item">
            <el-button type="primary" @click="create">立即创建</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-main>
  </el-container>
</template>

<script lang="ts" src="./createChallenge.ts"></script>

<style scoped>
.el-header{
  padding-inline-end: 0px;
  padding-inline-start: 0px;
}
.picture{
  width: 100%;
  height: 300px;
  margin-left: 0;
  margin-right: 0;
}
.main{
  position: absolute;
  width: 1000px;
  left: 285px;
}
.time1{
  position: absolute;
  margin: 3px 0px;
}
.time2{
  position: absolute;
  margin: 3px 300px;
}
.stockCode{
  position: absolute;
  margin: 0px 0px;
}
.item{
  padding-right: 120px;
}
.create-number {
  position: absolute;
  left: 0;
}
.create-funds {
  position: absolute;
  left: 0;
}
</style>
